export const hoverBlock = (editor) => {
  const { Components } = editor;

  Components.addType("hoverBlock", {
    model: {
      defaults: {
        name: "hoverBlock",
        attributes: { class: "case-block" },
        // components: [
        //   {
        //     type: "div",
        //     droppable: false,
        //     draggable: false,
        //     copyable: false,
        //     removable: false,
        //     attributes: { class: "box" },
        //   },
        // ],
        script() {
          document.addEventListener("DOMContentLoaded", (event) => {
            const box = document.querySelector(".case-block");

            const mouseDown = (e) => {
              let x = e.clientX - box.offsetLeft;
              let y = e.clientY - box.offsetTop;

              const move = (e) => {
                box.style.left = e.clientX - x + "px";
                box.style.top = e.clientY - y + "px";
              };

              document.addEventListener("mousemove", move);
              document.addEventListener(
                "mouseup",
                () => {
                  document.removeEventListener("mousemove", move);
                },
                { once: true }
              );
            };

            box.addEventListener("mousedown", mouseDown);
          });
        },
        styles: `
          .case-block {
            position: fixed;
            left: 80%;
            top: 80%;
            transform: translate(-50%, -50%);
            width: 200px;
            height: 200px;
            border: 1px solid black;
            cursor: move;
            padding: 2px;
          }
          .box {
            width: 100%;
            height: 100%;
          }
        `,
      },
    },
  });

  // 注册 hoverBlock 组件
  editor.BlockManager.add("hoverBlock", {
    label: "悬浮块",
    category: "其他类",
    media: `<svg t="1721027776524" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6862" width="30" height="30"><path d="M786.944 796.672H686.08c-20.992 0-37.376-16.896-37.376-37.376V452.608c0-20.992 16.896-37.376 37.376-37.376h100.864c20.992 0 37.376 16.896 37.376 37.376v306.176c0 20.992-16.384 37.888-37.376 37.888z" p-id="6863"></path><path d="M134.656 181.76h754.176c-8.704 0-15.872-7.168-15.872-15.872V857.6c0-8.704 7.168-15.872 15.872-15.872H134.656c8.704 0 15.872 7.168 15.872 15.872V166.4c0 8.192-6.656 15.36-15.872 15.36z m-31.744 663.552c0 25.088 20.48 45.568 45.568 45.568h727.04c25.088 0 45.568-20.48 45.568-45.568V178.688c0-25.088-20.48-45.568-45.568-45.568H148.48c-25.088 0-45.568 20.48-45.568 45.568v666.624z" p-id="6864"></path></svg>`,
    content: {
      type: "hoverBlock",
    },
  });
};
